<template>
  <div class="wrapper">
    <header>
    <i class="fa fa-angle-left" style="font-size: 24px; cursor: pointer;" onclick="history.go(-1)"></i>
      <img src="../assets/header.png" />
    </header>
    

    <h1>修改密码</h1>

    <div class="change-password">
      <div class="input-group">
        <i class="fa fa-user-o"></i>
        <input
          type="text"
          v-model="gridMember.gmCode"
          placeholder="请输入登录编码"
        />
      </div>
      <div class="input-group">
        <i class="fa fa-key"></i>
        <input
          type="password"
          v-model="gridMember.password"
          placeholder="请输入原密码"
        />
      </div>
      <div class="input-group">
        <i class="fa fa-lock"></i>
        <input
          type="password"
          v-model="gridMember.newPassword"
          placeholder="请输入新密码"
        />
      </div>
      <div class="input-group">
        <i class="fa fa-lock"></i>
        <input
          type="password"
          v-model="confirmPassword"
          placeholder="请确认新密码"
        />
      </div>
      <div class="btn" @click="changePassword">确认修改</div>
    </div>

    <footer>
      <img src="../assets/bottom.png" />
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, inject } from "vue";
import { useRouter } from "vue-router";
import { getSessionStorage } from "../common.js";

const router = useRouter();
const axios = inject("axios");
const message = inject("message");

const gridMember = reactive({
  gmCode: "",
  password: "",
  newPassword: "",
});

const confirmPassword = ref("");

onMounted(() => {
  const member = getSessionStorage("gridMember");
  if (member) {
    gridMember.gmCode = member.gmCode;
  }
});

const changePassword = () => {
  if (!gridMember.password) {
    alert("请输入原密码");
    return;
  }
  if(gridMember.password!=getSessionStorage('gridMember').password){
    alert("原密码错误！");
    return;
  }
  if (!gridMember.newPassword) {
    alert("请输入新密码");
    return;
  }
  if (!confirmPassword.value) {
    alert("请确认新密码");
    return;
  }
  if (gridMember.newPassword !== confirmPassword.value) {
    alert("两次输入的新密码不一致");
    return;
  }

  axios
    .post("gridMember/updatePassword", {
        gmCode:gridMember.gmCode,
        password:gridMember.newPassword
    })
    .then((response) => {
      if (response.data >= 0) {
        alert("密码修改成功，请重新登录");
        // 清除sessionStorage并跳转到登录页
        sessionStorage.clear();
        router.push("/login");
      } else {
        alert("原密码不正确");
      }
    })
    .catch((error) => {
      console.log(error);
     alert("密码修改失败");
    });
};
</script>

<style scoped>
/* 可以复用登录页面的样式，或者根据需要调整 */
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

header {
  width: 100%;
}
header img {
  display: block;
  width: 100%;
  height: 200px;
}

h1 {
  width: 78vw;
  margin: 0 auto;
  text-align: center;
  font-size: 5.4vw;
  color: #6ab9f2;
  box-sizing: border-box;
  padding: 6vw 0 1vw;
  border-bottom: solid 2px #6ab9f2;
}

.change-password {
  width: 80vw;
  margin: 0 auto;
  margin-top: 5vw;
}

.input-group {
  width: 100%;
  height: 12vw;
  background-image: linear-gradient(90deg, #f1f1f1, #e1e1e1);
  border-radius: 6vw;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 6vw;
  margin-top: 8vw;
}

.input-group .fa {
  color: #6ab9f2;
  font-size: 5vw;
  margin-right: 2vw;
}

.input-group input {
  border: none;
  outline: none;
  background-image: linear-gradient(90deg, #f1f1f1, #e1e1e1);
  flex: 1;
}

.btn {
  width: 100%;
  height: 12vw;
  margin-top: 8vw;
  background-image: linear-gradient(90deg, #67c9ef, #7394f1);
  border-radius: 6vw;
  font-size: 5vw;
  color: #fff;
  text-align: center;
  line-height: 12vw;
  font-weight: 500;
  letter-spacing: 1vw;
  user-select: none;
}

footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
footer img {
  display: block;
  width: 100%;
  height: 100px;
}
</style>